
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont uce-ziliaoku"></i>
                    <div class="name">资料库</div>
                    <div class="fontclass">.uce-ziliaoku</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-collect"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.uce-collect</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-delete"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.uce-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-yulan"></i>
                    <div class="name">预览</div>
                    <div class="fontclass">.uce-yulan</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-home"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.uce-home</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-mobile"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.uce-mobile</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-update"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.uce-update</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-turnleft"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.uce-turnleft</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-turnright"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.uce-turnright</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.uce-add</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-print"></i>
                    <div class="name">打印</div>
                    <div class="fontclass">.uce-print</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-watch"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.uce-watch</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-car"></i>
                    <div class="name">物流运输</div>
                    <div class="fontclass">.uce-car</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-remind"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.uce-remind</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-remind-circle"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.uce-remind-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-themes"></i>
                    <div class="name">pf皮肤管理</div>
                    <div class="fontclass">.uce-themes</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-download"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.uce-download</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-dingdanguanli"></i>
                    <div class="name">订单管理</div>
                    <div class="fontclass">.uce-dingdanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-people"></i>
                    <div class="name">个人中心</div>
                    <div class="fontclass">.uce-people</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.uce-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-set"></i>
                    <div class="name">系统管理</div>
                    <div class="fontclass">.uce-set</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-quality"></i>
                    <div class="name">品质</div>
                    <div class="fontclass">.uce-quality</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-firstfile"></i>
                    <div class="name">一级会员</div>
                    <div class="fontclass">.uce-firstfile</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-secondfile"></i>
                    <div class="name">二级会员</div>
                    <div class="fontclass">.uce-secondfile</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-thirdfile"></i>
                    <div class="name">三级会员</div>
                    <div class="fontclass">.uce-thirdfile</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-permission"></i>
                    <div class="name">权限设置</div>
                    <div class="fontclass">.uce-permission</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-copy"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.uce-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-uncollect"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.uce-uncollect</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-email"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.uce-email</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-basedata"></i>
                    <div class="name">基础数据</div>
                    <div class="fontclass">.uce-basedata</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-upload"></i>
                    <div class="name">upload</div>
                    <div class="fontclass">.uce-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-exit"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.uce-exit</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-minus"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.uce-minus</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-stop"></i>
                    <div class="name">stop</div>
                    <div class="fontclass">.uce-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-qiehuan"></i>
                    <div class="name">切换</div>
                    <div class="fontclass">.uce-qiehuan</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-time"></i>
                    <div class="name">时效-实心</div>
                    <div class="fontclass">.uce-time</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-tipinfo"></i>
                    <div class="name">i</div>
                    <div class="fontclass">.uce-tipinfo</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-mail"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.uce-mail</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-yufu"></i>
                    <div class="name">预付卡</div>
                    <div class="fontclass">.uce-yufu</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-problem"></i>
                    <div class="name">help</div>
                    <div class="fontclass">.uce-problem</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-account"></i>
                    <div class="name">结算对账</div>
                    <div class="fontclass">.uce-account</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-tipinfo-circle"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.uce-tipinfo-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-heartbeat"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.uce-heartbeat</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-help"></i>
                    <div class="name">帮助_</div>
                    <div class="fontclass">.uce-help</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-shen"></i>
                    <div class="name">审</div>
                    <div class="fontclass">.uce-shen</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-org"></i>
                    <div class="name">部门</div>
                    <div class="fontclass">.uce-org</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-guihua"></i>
                    <div class="name">规划</div>
                    <div class="fontclass">.uce-guihua</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-quote"></i>
                    <div class="name">报价管理</div>
                    <div class="fontclass">.uce-quote</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-exchange"></i>
                    <div class="name">分配</div>
                    <div class="fontclass">.uce-exchange</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-status"></i>
                    <div class="name">岗位</div>
                    <div class="fontclass">.uce-status</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-qiyong"></i>
                    <div class="name">启用</div>
                    <div class="fontclass">.uce-qiyong</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-password"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.uce-password</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-success-circle"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.uce-success-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-qiyong-cricle"></i>
                    <div class="name">启用</div>
                    <div class="fontclass">.uce-qiyong-cricle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-iconyg"></i>
                    <div class="name">组织管理</div>
                    <div class="fontclass">.uce-iconyg</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-plus"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.uce-plus</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-loading"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.uce-loading</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-bind"></i>
                    <div class="name">绑定</div>
                    <div class="fontclass">.uce-bind</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-start"></i>
                    <div class="name">启动</div>
                    <div class="fontclass">.uce-start</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-save"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.uce-save</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-warn-circle"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.uce-warn-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-zhcx"></i>
                    <div class="name">综合查询</div>
                    <div class="fontclass">.uce-zhcx</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-hetongliebiao"></i>
                    <div class="name">合同列表</div>
                    <div class="fontclass">.uce-hetongliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-shangyi"></i>
                    <div class="name">上移</div>
                    <div class="fontclass">.uce-shangyi</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-xiayi"></i>
                    <div class="name">下移</div>
                    <div class="fontclass">.uce-xiayi</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-taobao"></i>
                    <div class="name">淘宝</div>
                    <div class="fontclass">.uce-taobao</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-bindpeople"></i>
                    <div class="name">绑定</div>
                    <div class="fontclass">.uce-bindpeople</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-unheartbeat"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.uce-unheartbeat</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-mail-circle"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.uce-mail-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-success"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.uce-success</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-problem-circle"></i>
                    <div class="name">疑问</div>
                    <div class="fontclass">.uce-problem-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-see-details"></i>
                    <div class="name">详情</div>
                    <div class="fontclass">.uce-see-details</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-upstairs"></i>
                    <div class="name">上移一层</div>
                    <div class="fontclass">.uce-upstairs</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-downstairs"></i>
                    <div class="name">下移一层</div>
                    <div class="fontclass">.uce-downstairs</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-hetong"></i>
                    <div class="name">合同</div>
                    <div class="fontclass">.uce-hetong</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-settlement"></i>
                    <div class="name">结算管理</div>
                    <div class="fontclass">.uce-settlement</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-changeuser"></i>
                    <div class="name">切换用户</div>
                    <div class="fontclass">.uce-changeuser</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-error"></i>
                    <div class="name">失败</div>
                    <div class="fontclass">.uce-error</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-ding"></i>
                    <div class="name">已钉</div>
                    <div class="fontclass">.uce-ding</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-unding"></i>
                    <div class="name">钉</div>
                    <div class="fontclass">.uce-unding</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-unfull"></i>
                    <div class="name">退出全屏</div>
                    <div class="fontclass">.uce-unfull</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-cut"></i>
                    <div class="name">删减</div>
                    <div class="fontclass">.uce-cut</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-toggle"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.uce-toggle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-permissions"></i>
                    <div class="name">系统权限</div>
                    <div class="fontclass">.uce-permissions</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-transit"></i>
                    <div class="name">11中转站</div>
                    <div class="fontclass">.uce-transit</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-full"></i>
                    <div class="name">全屏</div>
                    <div class="fontclass">.uce-full</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-roadway"></i>
                    <div class="name">道路运输</div>
                    <div class="fontclass">.uce-roadway</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-error-circle"></i>
                    <div class="name">失败</div>
                    <div class="fontclass">.uce-error-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-liebiao"></i>
                    <div class="name">开关列表设置</div>
                    <div class="fontclass">.uce-liebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-openfile"></i>
                    <div class="name">二级菜单</div>
                    <div class="fontclass">.uce-openfile</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-file"></i>
                    <div class="name">一级菜单</div>
                    <div class="fontclass">.uce-file</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-qudaoguanli"></i>
                    <div class="name">渠道管理</div>
                    <div class="fontclass">.uce-qudaoguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-search"></i>
                    <div class="name">chaxun</div>
                    <div class="fontclass">.uce-search</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-zhangdan"></i>
                    <div class="name">账单</div>
                    <div class="fontclass">.uce-zhangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-warn"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.uce-warn</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-unbind"></i>
                    <div class="name">解绑</div>
                    <div class="fontclass">.uce-unbind</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-settleaccounts"></i>
                    <div class="name">结算管理</div>
                    <div class="fontclass">.uce-settleaccounts</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-jixiaoguanli"></i>
                    <div class="name">绩效管理</div>
                    <div class="fontclass">.uce-jixiaoguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-yufukuan"></i>
                    <div class="name">预付款</div>
                    <div class="fontclass">.uce-yufukuan</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-butie"></i>
                    <div class="name">补贴</div>
                    <div class="fontclass">.uce-butie</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-cancel"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.uce-cancel</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-tel"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.uce-tel</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-changeos"></i>
                    <div class="name">切换系统</div>
                    <div class="fontclass">.uce-changeos</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-clock"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.uce-clock</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-import"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.uce-import</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-export"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.uce-export</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-triangledown"></i>
                    <div class="name">三角</div>
                    <div class="fontclass">.uce-triangledown</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-route"></i>
                    <div class="name">线路管理</div>
                    <div class="fontclass">.uce-route</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-position"></i>
                    <div class="name">职位</div>
                    <div class="fontclass">.uce-position</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-paixu-down"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.uce-paixu-down</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-loading-line"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.uce-loading-line</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-complain"></i>
                    <div class="name">投诉</div>
                    <div class="fontclass">.uce-complain</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-turndown"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.uce-turndown</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-turnup"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.uce-turnup</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-shenpi"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.uce-shenpi</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-wentijian"></i>
                    <div class="name">问题件</div>
                    <div class="fontclass">.uce-wentijian</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-jiedan"></i>
                    <div class="name">接单</div>
                    <div class="fontclass">.uce-jiedan</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-ck-details"></i>
                    <div class="name">查看详情</div>
                    <div class="fontclass">.uce-ck-details</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-service"></i>
                    <div class="name">在线客服</div>
                    <div class="fontclass">.uce-service</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-advance"></i>
                    <div class="name">预付款-01</div>
                    <div class="fontclass">.uce-advance</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-paixu-up"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.uce-paixu-up</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-zhuanzhang"></i>
                    <div class="name"> _一级菜单 转账处理</div>
                    <div class="fontclass">.uce-zhuanzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-baobiaoguanli"></i>
                    <div class="name">报表管理</div>
                    <div class="fontclass">.uce-baobiaoguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-zuoyequ"></i>
                    <div class="name">作业区</div>
                    <div class="fontclass">.uce-zuoyequ</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-gongdan"></i>
                    <div class="name">工单</div>
                    <div class="fontclass">.uce-gongdan</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-jichushezhi"></i>
                    <div class="name">基础设置</div>
                    <div class="fontclass">.uce-jichushezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont uce-lanjian"></i>
                    <div class="name">揽件</div>
                    <div class="fontclass">.uce-lanjian</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">uce-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
